<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">功能</BreadcrumbItem>
			    <BreadcrumbItem href="/wechat/function/customer">客服</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16">
		    		<ICol span="2">
		    			<router-link  v-if="$store.getters.per.wechat_function_customer_create" to="/wechat/function/customer/update"><Button type="primary" long>添加新客服</Button></router-link>
		    		</ICol>
		    		<ICol span="3">
		    			<Button type="primary" @click="sync" :disabled="disabled.disabled" long>刷新客服状态</Button>
		    		</ICol>
		    		<ICol span="2" style="padding-top: 5px;">
		    			<Tooltip content="一旦开启,客服将优先于默认回复">
			    			<ISwitch v-model="customerSwitch" @on-change="changeSwitch">
			    				<span slot="open">开</span>
	        					<span slot="close">关</span>
	        				</ISwitch>
		    			</Tooltip>
		    		</ICol>
		    	</Row>
		    	<InviteUser ref="invite" :callback="resetTable"></InviteUser>
		    	<BaseTable ref="table" :url="table.url" :header="table.header" ></BaseTable>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Row,Col,Button,Breadcrumb,Tag,Switch,Tooltip} from 'view-design';

	import BaseTable  from 'admin/components/common/table/base';

	import InviteUser from 'admin/components/wechat/function/customer/invite-user';

	export default{
		components:{
			Row,
            'ICol':Col,
            Button,
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            Tag,
            BaseTable,
            InviteUser,
            'ISwitch' : Switch,
            Tooltip,
        },
        data () {
            return {
            	table:{
            		url : '/wechat/function/customer/view/list',
            		header: []
            	},
            	customerSwitch : false,
            	disabled :{
            		sync : false,
            	}
            }
        },
        methods:{
        	resetTable(params){
        		this.$refs['table'].tableData(params);
        	},
        	//同步客服
        	sync(){
        		this.disabled.sync = true;
        		this.Axios.Wechat.Function.Customer.Sync()
	            .then(res =>{
	            	this.disabled.sync = false;
	                if(!res) return false;
	                this.resetTable();
	            })
        	},
        	//获取客服开关
        	getSwitch(){
        		this.Axios.Wechat.Function.Customer.GetSwitch()
	            .then(res =>{
	                if(!res) return false;
	                this.customerSwitch = res.data.bool;
	            })
        	},
        	changeSwitch(bool){
        		this.Axios.Wechat.Function.Customer.Switch({switch:bool})
	            .then(res =>{
	                if(!res) return false;
	                
	            })
        	}
        },
        created:function(){
        	this.getSwitch();
        	this.table.header =  [
                {
			        title: '账号',
			        key: 'account'
			    },
			    {
			        title: '昵称',
			        key: 'nickname'
			    },
			    {
			        title: '绑定微信号',
			        key: 'wechatNo'
			    },
			    {
			        title: '头像',
			        key: 'headimgurl',
			        render:(h,params) =>{
                        return h('img',{
                            attrs:{
                                src : params.row.headimgurl,
                                style : 'width:60px;'
                            }
                        });
                    },
			    },
			    {
			        title: '状态',
			        key: 'inviteStatus',
			        render:(h,params) =>{
			        	var text = '',color = 'default';
			        	switch(params.row.inviteStatus){
			        		case -1 :
			        			text = '尚未邀请';
			        		break;
			        		case 0 :
			        			text = '已通过';
			        			color = 'green';
			        		break;
			        		case 1 :
			        			text = '等待确认';
			        			color = 'blue';
			        		break;
			        		case 2 :
			        			text = '被拒绝';
			        			color = 'red';
			        		break;
			        		case 3 :
			        			text = '过期';
			        			color = 'yellow';
			        		break;
			        	}
			        	return h(Tag, {
			                    props :{
			                    	color : color
			                    }
			                }, text);
			        }
			    },
			    {
			        title: '操作',
			        key: 'action',
			        width: 200,
			        align: 'center',
			        render: (h, params) => {
			            return h('div', [
			            	!this.$store.getters.per.wechat_function_customer_update ? '' :
			                h(Button, {
			                    props: {
			                        type: 'primary',
			                        size: 'small'
			                    },
			                    style: {
			                        marginRight: '5px'
			                    },
			                    on: {
			                        click: () => {
			                        	this.$router.push('/wechat/function/customer/update/'+params.row.id);
			                        }
			                    }
			                }, '编辑'),
			                params.row.wechatNo==null ?
			                h(Button, {
			                    props: {
			                        type: 'primary',
			                        size: 'small'
			                    },
			                    style: {
			                        marginRight: '5px'
			                    },
			                    on: {
			                        click: () => {
			                        	this.$refs.invite.form.id = params.row.id;
			                        	this.$refs.invite.modal = true;
			                        }
			                    }
			                }, '绑定') : '',
			                !this.$store.getters.per.wechat_function_customer_delete ? '' :
			                h(Button, {
			                    props: {
			                        type: 'error',
			                        size: 'small'
			                    },
			                    on: {
			                        click: () => {
			                        	this.$Modal.confirm({
						                    title: '你确定要删除吗？',
						                    content: '一旦删除无法恢复',
						                    onOk: () => {
						                        this.Axios.Wechat.Function.Customer.Del(params.row.id)
									            .then(res =>{
									                if(!res) return false;
									                this.$refs['table'].tableData();
									            })
						                    }
						                });
			                        }
			                    }
			                }, '删除')
			            ]);
			        }
			    }
            ];
        },
        mounted:function(){
	    	this.$store.dispatch('CHANGE_ROUTE',{name:'客服功能',route:'/wechat/function/customer',action:1,closable:true});
	    }
	}
</script>